<template>
    <div class="cover">
        <div class="button" @click="showPopup = true">点击打开弹窗</div>
        <div v-show="showPopup" v-clickoutside="handleClose" class="popup">这是弹窗</div>
    </div>
</template>

<script>
import clickoutside from 'element-ui/src/utils/clickoutside'

export default {
    directives: { clickoutside },
    data() {
        return {
            showPopup: false,
        }
    },
    created() { },
    mounted() { },
    methods: {
        handleClose() {
            if (this.showPopup) this.showPopup = false
        }
    }
};
</script>

<style scoped lang="less">
.cover {
    width: 100%;
    height: var(--window-vh);
    background: #f1f1f1;

    .button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        margin: 10px;
        padding: 5px;
        border-radius: 4px;
        background: skyblue;
        user-select: none;
        cursor: pointer;

        &:active {
            background-color: rgba(135, 206, 235, 0.6);
        }
    }

    .popup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background: pink;
    }
}
</style>
